<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js事件</title>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <button id="but">唐伯虎</button>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <script>
            /* 
                事件由三部分组成(事件三要素)
                    事件源 事件被触发的元素
                    事件类型  触发条件
                        鼠标 键盘等方法
                    事件处理程序
                        通过函数赋值方式完成
            */
          var but= document.getElementById('but')
          but.onclick = function(){
            alert('唐伯虎电文香')
            console.log('唐伯虎电文香')
          }
          document.querySelector('p').onclick=function () {
            console.log('werffg')
          }
          /* 
            执行事件的步骤
                获取事件元素
                注册事件(绑定事件)
                添加函数
          */
        </script>
    </div>
</body>


</html>